<!-- 政策新闻页面 -->
<template>
  <div class="page">
    <div v-wechat-title="$route.meta.title"></div>
    <div class="page__bd" style="height: 100%;">
      <div class="weui-tab">
        <div class="weui-navbar">
          <div class="weui-navbar__item weui-bar__item_on" val="notice">
            通知公告
          </div>
          <div class="weui-navbar__item" val="news">
            新闻动态
          </div>
          <div class="weui-navbar__item" val="know">
            知识百科
          </div>
        </div>
        <!-- 通知公告 -->
        <div class="weui-tab__panel" id="notice">
          <div class="weui-cells">
            <a class="weui-cell  weui-cell_access weui-cell_example" href="javascript:" @click="toInfo(obj)"
               v-for="(obj,index) in notices">
              <div class="weui-cell__hd">
                <img :src="obj.cover" alt="" style="width: 40px; margin-right: 16px; display: block;"></div>
              <div class="weui-cell__bd">
                <p v-text="obj.title"></p>
              </div>
              <div class="weui-cell__ft" v-text="obj.publicTime.substring(0, 10)"></div>
            </a>
          </div>
        </div>

        <!-- 新闻动态 -->
        <div class="weui-tab__panel" id="news" style="display: none">
          <div class="weui-cells">
            <a class="weui-cell  weui-cell_access weui-cell_example" href="javascript:" @click="toInfo(obj)"
               v-for="(obj,index) in news">
              <div class="weui-cell__hd">
                <img :src="obj.cover" alt="" style="width: 40px; margin-right: 16px; display: block;"></div>
              <div class="weui-cell__bd">
                <p v-text="obj.title"></p>
              </div>
              <div class="weui-cell__ft" v-text="obj.publicTime.substring(0, 10)"></div>
            </a>
          </div>
        </div>
        <!-- 知识百科 -->
        <div class="weui-tab__panel" id="know" style="display: none">
          <div class="weui-cells">
            <a class="weui-cell  weui-cell_access weui-cell_example" href="javascript:" @click="toInfo(obj)"
               v-for="(obj,index) in knows">
              <div class="weui-cell__hd">
                <img :src="obj.cover" alt="" style="width: 40px; margin-right: 16px; display: block;"></div>
              <div class="weui-cell__bd">
                <p v-text="obj.title"></p>
              </div>
              <div class="weui-cell__ft" v-text="obj.publicTime.substring(0, 10)"></div>
            </a>
          </div>
        </div>
      </div>
    </div>


    <!--BEGIN toast-->
    <div id="infoToast" style="display: none;">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <i class="weui-icon-warn weui-icon_toast"></i>
        <p class="weui-toast__content" id="weui-toast__content"></p>
      </div>
    </div>
    <!-- loading toast -->
    <div id="loadingToast" style="display: none;">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据加载中</p>
      </div>
    </div>
    <!--end toast-->
  </div>
</template>
<script type="text/javascript">
  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import {axiosContentType, apiPath, basePath} from '@/assets/js/boss'
  import 'weui'

  export default {
    data() {
      return {
        notices: [],
        noticeResult: {},
        noticePageNum: 1,
        news: [],
        newsResult: {},
        newsPageNum: 1,
        knows: [],
        knowResult: {},
        knowPageNum: 1
      }
    },
    mounted() {
      let that = this;
      that.noticePage(1);

      // 监听navbar点击事件，显示对应的数据层
      $('.weui-navbar__item').on('click', function () {
        $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
        $('.weui-tab__panel').hide();
        let id = $(this).attr('val');
        $('#' + id).show();
        if (id === 'notice' && that.notices.length === 0) {
          that.noticePage(1);
        }
        if (id === 'news' && that.news.length === 0) {
          that.newsPage(1);
        }
        if (id === 'know' && that.knows.length === 0) {
          that.knowPage(1);
        }
      });

      // 监听上拉事件翻页
      let loading = false;  // 状态标记 这个变量主要是用来控制触发次数
      $(window).scroll(function () {
        if (loading) return;
        let scrollTop = Math.ceil($(this).scrollTop()) // 滚动条与顶部的高度
        let curHeight = $(this).height() // 当前可视页面高度
        let totalHeight = $(document).height() // 页面的总高度
        if (scrollTop + curHeight >= totalHeight) {
          let val = $('div.weui-bar__item_on').attr('val');
          if (val === 'notice') { // 通知公告
            if (that.noticePageNum < that.noticeResult.pageCount) { // 如果当前页小于总页面
              that.loading(); // 显示 加载中图标
              that.noticePageNum = that.noticePageNum + 1;
              that.noticePage(that.noticePageNum);
            } else {
              that.showMsg('没有了');
            }
          } else if (val === 'news') { // 新闻动态
            if (that.newsPageNum < that.newsResult.pageCount) { // 如果当前页小于总页面
              that.loading(); // 显示 加载中图标
              that.newsPageNum = that.newsPageNum + 1;
              that.newsPage(that.newsPageNum);
            } else {
              that.showMsg('没有了');
            }
          } else if (val === 'know') { // 知识百科
            if (that.knowPageNum < that.knowResult.pageCount) { // 如果当前页小于总页面
              that.loading(); // 显示 加载中图标
              that.knowPageNum = that.knowPageNum + 1;
              that.knowPage(that.knowPageNum);
            } else {
              that.showMsg('没有了');
            }
          }
        }
      });
    },
    methods: {
      noticePage(pageNum) {
        let that = this;
        let data = {type: 5, pageNum: pageNum};
        axios.post(apiPath + '/api/sys/sysNews/page/' + pageNum
          , JSON.stringify(data)
          , axiosContentType.json
        ).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.noticeResult = result.data;
            that.notices = that.notices.concat(result.data.data);
          } else {
            that.showMsg(result.message);
          }
        });
      },
      newsPage(pageNum) {
        let that = this;
        let data = {type: 1};
        axios.post(apiPath + '/api/sys/sysNews/page/' + pageNum
          , JSON.stringify(data)
          , axiosContentType.json
        ).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.newsResult = result.data;
            that.news = that.news.concat(result.data.data);
          } else {
            that.showMsg(result.message);
          }
        });
      },
      knowPage(pageNum) {
        let that = this;
        let data = {type: 3};
        axios.post(apiPath + '/api/sys/sysNews/page/' + pageNum
          , JSON.stringify(data)
          , axiosContentType.json
        ).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.knowResult = result.data;
            that.knows = that.knows.concat(result.data.data);
          } else {
            that.showMsg(result.message);
          }
        });
      },
      toInfo(item) {
        location.href = basePath + '/wechat/newsDetail?id=' + item.id;
      },
      showMsg(msg) {
        let $toast = $('#infoToast');
        if ($toast.css('display') !== 'none') return;
        $('#weui-toast__content').empty().append(msg);
        $toast.fadeIn(100);
        setTimeout(function () {
          $toast.fadeOut(100);
        }, 2000);
      },
      loading() {
        let $loadingToast = $('#loadingToast');
        $loadingToast.fadeIn(100);
        setTimeout(function () {
          $loadingToast.fadeOut(100);
        }, 2000);
      }
    }
  }
</script>
